<template>
<!--    品牌价值-->
    <div>
        <div style="position: fixed;width: 100%;background: #fff;z-index: 99;">
            <bar text="品牌价值"></bar>
        </div>
        <div style="width: 100%;height:54px;"></div>
<!--        顶部导航-->
        <div class="brandTop">
            <div @click="topBar1" style="display: flex;align-items: center;margin-left: 26px;">
                <p :class="topIndex==0?'brandTop-name2':'brandTop-name'" style="margin-right: 8px;">综合排序</p>
                <img v-if="topImg == 0" src="./images/kpiSort1.png" style="width: 8px;height: 12px;" alt="">
                <img v-if="topImg == 1" src="./images/kpiSort2.png" style="width: 8px;height: 12px;" alt="">
                <img v-if="topImg == 2" src="./images/kpiSort3.png" style="width: 8px;height: 12px;" alt="">
            </div>
            <p style="width: 1px;height: 16px;background: #E1E1E1;margin-left: 12px;"></p>
            <p @click="topBar2" :class="topIndex==1?'brandTop-name2':'brandTop-name'" style="margin-left: 20px;">客流</p>
            <p @click="topBar3" :class="topIndex==2?'brandTop-name2':'brandTop-name'" style="margin-left: 30px;">销售额</p>
            <p @click="topBar4" :class="topIndex==3?'brandTop-name2':'brandTop-name'" style="margin-left: 30px;">坪效</p>
            <p @click="topBar5" :class="topIndex==4?'brandTop-name2':'brandTop-name'" style="margin-left: 30px;">集客力</p>
        </div>
<!--        品牌列表-->
        <div style="margin-top: 60px;">
            <div v-if="topIndex == 0">
                <div v-for=" (item,idx) in list " class="brandList">
                    <img v-if="item.idx == 0" src="./images/brand16.png" style="width: 24px;height: 20px;margin-left: 10px;margin-right: 16px;" alt="">
                    <img v-if="item.idx == 1" src="./images/brand17.png" style="width: 24px;height: 20px;margin-left: 10px;margin-right: 16px;" alt="">
                    <img v-if="item.idx == 2" src="./images/brand18.png" style="width: 24px;height: 20px;margin-left: 10px;margin-right: 16px;" alt="">
                    <p v-if="item.idx != 0 && item.idx != 1 && item.idx != 2" style="margin-left: 20px;font-size: 12px;color: #333333;margin-right: 24px;">{{idx +1}}</p>
                    <img class="brandList-img" :src="item.src" alt="">
                    <p class="brandList-name">{{item.name}}</p>
                    <div style="margin-right: 12px;text-align: center;">
                        <p style="color: #999999;font-size: 11px;">店铺评分</p>
                        <p style="font-size: 17px;color: #E04F49;text-align: center;margin-top: 4px;">{{item.num}}</p>
                    </div>
                </div>
            </div>
           <div v-else>
               <div v-for=" (item,idx) in list " class="brandList">
                   <img v-if="idx == 0" src="./images/brand16.png" style="width: 24px;height: 20px;margin-left: 10px;margin-right: 16px;" alt="">
                   <img v-if="idx == 1" src="./images/brand17.png" style="width: 24px;height: 20px;margin-left: 10px;margin-right: 16px;" alt="">
                   <img v-if="idx == 2" src="./images/brand18.png" style="width: 24px;height: 20px;margin-left: 10px;margin-right: 16px;" alt="">
                   <p v-if="idx != 0 && idx != 1 && idx != 2" style="margin-left: 20px;font-size: 12px;color: #333333;margin-right: 24px;">{{idx +1}}</p>
                   <img class="brandList-img" :src="item.src" alt="">
                   <p class="brandList-name">{{item.name}}</p>
                   <div style="margin-right: 12px;text-align: center;">
                       <p style="color: #999999;font-size: 10px;">店铺评分</p>
                       <p style="font-size: 16px;color: #E04F49;text-align: center;margin-top: 4px;">{{num[idx].num}}</p>
                   </div>
               </div>
           </div>
        </div>
    </div>
</template>

<script>
    import titles from "../../components/titleBar";
    import bar from "../../components/topBar2";
    export default {
        name: "brandValue",
        data(){
            return{
                topIndex:0,
                topImg:0,
                list:[
                    {
                        src:require('./images/HM.png'),
                        name:'HM',
                        num:100,
                        idx:0,
                    },
                    {
                        src:require('./images/brand01.png'),
                        name:'耐克',
                        num:98,
                        idx:1
                    },
                    {
                        src:require('./images/brand02.png'),
                        name:'Jessy Line',
                        num:98,
                        idx:2
                    },
                    {
                        src:require('./images/brand03.png'),
                        name:'河马生鲜',
                        num:97,
                        idx:3
                    },
                    {
                        src:require('./images/brand04.png'),
                        name:'国美电器',
                        num:96,
                        idx:4
                    },
                    {
                        src:require('./images/brand05.png'),
                        name:'李维斯',
                        num:93,
                        idx:5
                    },
                    {
                        src:require('./images/brand06.png'),
                        name:'ONLY',
                        num:92,
                        idx:6
                    }, {
                        src:require('./images/brand07.png'),
                        name:'adidas',
                        num:90,
                        idx:7
                    }, {
                        src:require('./images/brand08.png'),
                        name:'ZARA',
                        num:90,
                        idx:8
                    },
                    {
                        src:require('./images/brand09.png'),
                        name:'名创优品',
                        num:88,
                        idx:9
                    },
                    {
                        src:require('./images/brand10.png'),
                        name:'7-11',
                        num:87,
                        idx:10
                    },
                    {
                        src:require('./images/brand11.png'),
                        name:'巴黎贝甜',
                        num:85,
                        idx:11
                    },
                    {
                        src:require('./images/brand12.png'),
                        name:'MAC',
                        num:83,
                        idx:12
                    },
                    {
                        src:require('./images/brand13.png'),
                        name:'UGG',
                        num:82,
                        idx:13
                    },
                    {
                        src:require('./images/brand14.png'),
                        name:'必胜客',
                        num:82,
                        idx:14
                    },
                    {
                        src:require('./images/brand15.png'),
                        name:'苹果',
                        num:79,
                        idx:15
                    },


                ],
                num:[
                    {
                        num:100
                    },
                    {
                        num:98
                    },
                    {
                        num:98
                    },
                    {
                        num:97
                    },
                    {
                        num:94
                    },
                    {
                        num:93
                    },
                    {
                        num:91
                    },
                    {
                        num:90
                    },
                    {
                        num:90
                    },
                    {
                        num:89
                    },
                    {
                        num:87
                    },
                    {
                        num:87
                    },
                    {
                        num:86
                    },
                    {
                        num:84
                    },
                    {
                        num:80
                    },
                    {
                        num:78
                    },

                ]
            }
        },
        components: {
            titles,
            bar,
        },
        methods:{
            // 点击综合排序
            topBar1(){
                if(this.topIndex == 0){
                    if(this.topImg == 0){
                        this.topImg = 1
                        var arr = this.list.reverse()
                        console.log(arr)
                    }else {
                        this.topImg = 0
                        var arr = this.list.reverse()
                        console.log(arr)
                    }
                }else {
                    this.topIndex = 0
                    this.topImg = 0
                    var arr = [
                        {
                            src:require('./images/HM.png'),
                            name:'HM',
                            num:100,
                            idx:0
                        },
                        {
                            src:require('./images/brand01.png'),
                            name:'耐克',
                            num:98,
                            idx:1
                        },
                        {
                            src:require('./images/brand02.png'),
                            name:'Jessy Line',
                            num:98,
                            idx:2
                        },
                        {
                            src:require('./images/brand03.png'),
                            name:'河马生鲜',
                            num:97,
                            idx:3
                        },
                        {
                            src:require('./images/brand04.png'),
                            name:'国美电器',
                            num:96,
                            idx:4
                        },
                        {
                            src:require('./images/brand05.png'),
                            name:'李维斯',
                            num:93,
                            idx:5
                        },
                        {
                            src:require('./images/brand06.png'),
                            name:'ONLY',
                            num:92,
                            idx:6
                        }, {
                            src:require('./images/brand07.png'),
                            name:'adidas',
                            num:90,
                            idx:7
                        }, {
                            src:require('./images/brand08.png'),
                            name:'ZARA',
                            num:90,
                            idx:8
                        },
                        {
                            src:require('./images/brand09.png'),
                            name:'名创优品',
                            num:88,
                            idx:9
                        },
                        {
                            src:require('./images/brand10.png'),
                            name:'7-11',
                            num:87,
                            idx:10
                        },
                        {
                            src:require('./images/brand11.png'),
                            name:'巴黎贝甜',
                            num:85,
                            idx:11
                        },
                        {
                            src:require('./images/brand12.png'),
                            name:'MAC',
                            num:83,
                            idx:12
                        },
                        {
                            src:require('./images/brand13.png'),
                            name:'UGG',
                            num:82,
                            idx:13
                        },
                        {
                            src:require('./images/brand14.png'),
                            name:'必胜客',
                            num:82,
                            idx:14
                        },
                        {
                            src:require('./images/brand15.png'),
                            name:'苹果',
                            num:79,
                            idx:15
                        },


                    ]
                    this.list = arr
                }
            },
            // 点击客流
            topBar2(){
                this.topIndex = 1
                this.topImg = 2
                var arr = this.list
                var newArr =[]
                for(var i=arr.length+1;i>0;){
                    i--
                    var rdm = Math.floor(Math.random()*arr.length)
                    if(!newArr.includes(arr[rdm])){
                        newArr.push(arr[rdm])
                    }else{
                        if(newArr.length == arr.length){
                            break;
                        }
                        i++
                    }
                }
                this.list = newArr
            },
            // 点击销售额
            topBar3(){
                this.topIndex = 2
                this.topImg = 2
                var arr = this.list
                var newArr =[]
                for(var i=arr.length+1;i>0;){
                    i--
                    var rdm = Math.floor(Math.random()*arr.length)
                    if(!newArr.includes(arr[rdm])){
                        newArr.push(arr[rdm])
                    }else{
                        if(newArr.length == arr.length){
                            break;
                        }
                        i++
                    }
                }
                this.list = newArr
            },
            // 点击坪效
            topBar4(){
                this.topIndex = 3
                this.topImg = 2
                var arr = this.list
                var newArr =[]
                for(var i=arr.length+1;i>0;){
                    i--
                    var rdm = Math.floor(Math.random()*arr.length)
                    if(!newArr.includes(arr[rdm])){
                        newArr.push(arr[rdm])
                    }else{
                        if(newArr.length == arr.length){
                            break;
                        }
                        i++
                    }
                }
                this.list = newArr
            },
            // 点击集客力
            topBar5(){
                this.topIndex = 4
                this.topImg = 2
                var arr = this.list
                var newArr =[]
                for(var i=arr.length+1;i>0;){
                    i--
                    var rdm = Math.floor(Math.random()*arr.length)
                    if(!newArr.includes(arr[rdm])){
                        newArr.push(arr[rdm])
                    }else{
                        if(newArr.length == arr.length){
                            break;
                        }
                        i++
                    }
                }
                this.list = newArr
            },
        }
    }
</script>

<style scoped lang="scss">
    .brandTop{
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        box-shadow:0px 1px 15px 0px rgba(193,193,193,0.5);
        background: #FFFFFF;
        position: fixed;
    }
    .brandTop-name{
        font-size: 13px;
        color: #545454;
    }
    .brandTop-name2{
        font-size: 13px;
        color: #255ED7;
    }
    /*列表*/
    .brandList{
        width: 345px;
        height: 64px;
        background: #fff;
        border-radius: 5px;
        box-shadow:0px 1px 6px 0px rgba(228,228,230,0.5);
        margin-left: 16px;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
    }
    .brandList-img{
        width: 38px;
        height: 38px;
    }
    .brandList-name{
        font-size: 14px;
        color: #333333;
        margin-left: 18px;
        flex: 1;
    }
</style>
